@use 'mixins/amixin' as *;
.builder-list {
  height: 100%;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  @include scrollbar(var(--mat-sys-primary));

  .wrapper {
    display: flex;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    .load {
      @include middle-center();
      z-index: 9999;
    }
    #builder-list {
      flex: 1 1 auto;
      overflow: auto;
      padding-bottom: 150px;
    }
  }
  .component-item {
    position: relative;
    min-height: 66px;
    .add-new-section {
      position: absolute;
      z-index: 0;
      opacity: 0;
      left: 50%;
      bottom: -18px;
      transform: translateX(-50%);
    }
    .animate-warn {
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: var(--mat-sys-error-container);
        border: 1px solid var(--mat-sys-error);
      }
    }
    &:hover {
      .add-new-section {
        opacity: 1;
        z-index: 999;
      }
    }
    ::ng-deep {
      [contenteditable='true'] {
        cursor: text;
        background-color: var(--mat-sys-secondary-fixed);
      }
      app-dynamic-component {
        position: relative;
        display: block;
        box-sizing: content-box;
        padding: 2px;
        &:hover {
          z-index: 10;
          outline-offset: -2px;
          outline: 1px dashed var(--mat-sys-primary);
          > .component-toolbar {
            display: block !important;
          }
        }
        > .component-toolbar {
          position: absolute;
          left: 0;
          top: 0px;
          width: 100%;
          z-index: 999;
          line-height: 1;
        }
      }
    }
  }

  .actions {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
  }

  .iframe-wrapper {
    display: none;
    width: 100%;
    height: 100%;
    .preview-iframe {
      max-height: 94%;
    }
  }

  .preview {
    height: 100%;
    background-color: var(--mat-sys-inverse-surface);
    #builder-list {
      display: none;
      flex: 0 0 auto;
      background-color: var(--mat-sys-surface);
    }
    .iframe-wrapper {
      @apply flex relative mx-auto flex-1 items-center justify-center;
    }
    .preview-iframe {
      &:after {
        content: '';
        position: absolute;
        display: block;
        border-radius: 54px;
        left: -12px;
        top: -12px;
        right: -12px;
        bottom: -12px;
        z-index: -1;
        background-color: var(--mat-sys-shadow);
        box-shadow: var(--mat-sys-level1);
      }
      ::ng-deep iframe {
        width: 100%;
        height: 100%;
        border-radius: 38px;
      }
    }
  }

  .preview-xs,
  .preview-xs-md {
    .preview-iframe {
      width: 375px;
      height: 812px;
      max-width: calc(100% - 24px);
    }
  }
  .preview-sm {
    .preview-iframe {
      width: 768px;
      height: 1024px;
    }
  }

  .preview-xs-md {
    #builder-list {
      display: block;
      flex: 0 0 70%;
      overflow-x: auto;
    }
    .iframe-wrapper {
      flex: 0 0 30%;
    }
  }

  .preview-iframe {
    max-height: 94%;
    z-index: 10;
    @apply relative;
    width: 100%;
    height: 100%;
    z-index: 10;
  }

  ::ng-deep {
    .layout-builder {
      @apply pt-[30px];
      .layout {
        @apply p-0;
        &:hover {
          outline-offset: -2px;
          outline: 1px dashed var(--mat-sys-primary);
          > .toolbar {
            display: block;
          }
        }
      }
      .layout-inner {
        > .layout {
          .placeholder {
            color: rgba(0, 0, 0, 0.75);
            &:hover {
              color: var(--mat-sys-on-primary);
            }
          }
        }
      }
    }
  }
}
